<template>
  <div class="my-footprint page_pos_style" :style="{ top: `${phoneStatusBarHeight}`}">
    <!-- <van-nav-bar :title="parseInt($route.query.status) === 0 ? '我的足迹':'我的收藏'" fixed placeholder :border='false'>
      <template #left>
        <van-icon
        name="arrow-left"
        size="18"
        @click="goback()"
        />
      </template>
      <template #right>
        <img
        src="../../assets/image/icon_search.png"
        @click="onClickRight()"
        v-show="isActive"
        >
      </template>
    </van-nav-bar> -->
    
    <navbar :title="title"></navbar>
    <div class="page_pos_scroll" :style="{ top: `${phoneStatusBarHeight}`,marginTop:'12vw'}">
      <div class="search-box">
        <form action="/">
          <van-search
            v-model.trim="value"
            shape="round"
            placeholder="搜索"
            @search="onSearch"
          />
        </form>
        <!--
            v-show='isCancel' 
            show-action -->
      </div>
      <div class="img-box">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <image-fall v-if="items" :items="items" @func="deleteData" :status="parseInt($route.query.status)"></image-fall>
        </van-pull-refresh>
        <!-- 一次加载20条，点击加载跟多再加载 -->
        <div>
          <div class="favorite-cilck-more" @click="getMore" v-show="more">点击加载更多</div>
          <div class="favorite-cilck-more" v-show="!more">没有更多了</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import imageFall from '../../components/common/imageFall.vue'
  import { getFootList, getFavoriteList, deleteCollection, deleteFoot, getLike, getFoot } from '../../views/find/api'

  export default{
    components: {
      imageFall
    },
    data() {
      return {
        // header栏 => 标题
        title:"",
        list: [],
        loading: false,
        finished: false,
        refreshing: false,
        radio: 1,
        value: '',
        isActive: true,
        isCancel: false,
        items: null,
        more: true,
        currentPage: 0,
        perPageNumber: 20,
        // 获取屏幕状态栏高度
        phoneStatusBarHeight:''
      };
    },
    methods: {
      // 删除数组
      async deleteData(data) {
        // 判断状态
        let status = parseInt(this.$route.query.status)
        if(status === 0) {
          // console.log('我的足迹')
          const res = await deleteFoot(this.items[data].id)
          if(res.code === 0) {
            this.$notify({ type: 'success', message: '删除成功' });
            // 修改提示栏距离顶部高度
            this.$nextTick(()=>{
              document.querySelector('.van-popup--top').style.top = this.phoneStatusBarHeight
            })
            this.items = null
            this.list = []
            this.getFootData()
          } else {
            this.$notify({ type: 'danger', message: '删除失败，请检查网络' });
            // 修改提示栏距离顶部高度
            this.$nextTick(()=>{
              document.querySelector('.van-popup--top').style.top = this.phoneStatusBarHeight
            })
          }
        } else if (status === 1) {
          // console.log('我的收藏')
          // data是要删除的元素的下标
          const res = await deleteCollection(this.items[data].id)
          if(res) {
            this.$notify({ type: 'success', message: '删除成功' });
            // 修改提示栏距离顶部高度
            this.$nextTick(()=>{
              document.querySelector('.van-popup--top').style.top = this.phoneStatusBarHeight
            })
            this.items = null
            this.list = []
            this.getFavoriteData()
          } else {
            this.$notify({ type: 'danger', message: '删除失败，请检查网络' });
            // 修改提示栏距离顶部高度
            this.$nextTick(()=>{
              document.querySelector('.van-popup--top').style.top = this.phoneStatusBarHeight
            })
          }
        }
        // this.items.splice(data,1)
      },
      // 回到上个页面
      goback() {
        this.$router.go(-1)
      },
      // 点击加载更多
      getMore() {
        this.items = null
        // 判断状态
        let status = parseInt(this.$route.query.status)
        if(status === 0) {
          this.getFootData()
        } else if (status === 1) {
          this.getFavoriteData()
        }
      },
      // 搜索
      async onSearch() {
        console.log(this.value)
        this.currentPage = 0
        // 判断状态
        this.items = null
        this.list = []
        let status = parseInt(this.$route.query.status)
        if(status === 0) {
          this.getFootData()
        } else if (status === 1) {
          this.getFavoriteData()
        }
      },
      // 取消搜索
      onCancel() {
        this.isCancel = false
        this.isActive = true
      },
      onClickRight() {
        this.isActive = false
        this.isCancel = true
      },
      // 下拉加载
      onLoad() { 
        clearInterval(this.timeOut);　　// 清除定时器
        setTimeout(() => {
          if (this.refreshing) {
            this.refreshing = false;
          }
          this.loading = false;
          if (this.list.length >= 0) {
            this.finished = true;
          }
        }, 1000)
      },
      // 刷新
      onRefresh() {
        // 清空列表数据
        this.finished = false;

        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.loading = true;
        this.onLoad();
      },
      //获取足迹数据
      async getFootData() {
        // this.items = [
        //   {
        //     img:'https://img2.baidu.com/it/u=1119458334,264352446&fm=26&fmt=auto',
        //     title: '买坦克还要3个月',
        //     tag: ['1','2'],
        //     userImg: 'https://img1.baidu.com/it/u=3045248289,3357650016&fm=26&fmt=auto',
        //     userName: '刘余旭',
        //     fromNum: '1',
        //     from: '抖音',
        //     id: '1'
        //   }
        // ]
        this.value = this.value.replace(/\s+/g,"")
        let info = {
          authorOrTitle: this.value,
          currentPage: this.currentPage,
          perPageNumber: this.perPageNumber
        }
        const {data} = await getFootList(info)
        // console.log('getFootList')
        let listMore = data.list.map(item => {
          return {
            tag: item.tbTagCS.map(item => {
              return item.tagName
            }),
            img: item.tbVideoManagementCDTOS.videoS,
            title: item.tbVideoManagementCDTOS.videoTitle,
            userImg: item.tbVideoManagementCDTOS.zImages,
            userName: item.tbVideoManagementCDTOS.zAuthorName,
            fromNum: 1,
            from: item.tbVideoManagementCDTOS.pImages,
            id: item.tbVideoManagementCDTOS.vId,
            videoImg: item.tbVideoManagementCDTOS.cover
          }
        })
        this.list = this.list.concat(listMore)
        this.items = this.list
        console.log(listMore.length)
        if(listMore.length === 20) {
          this.currentPage = data.currentPage
        } else {
          this.more = false
        }
      },
      // 获取收藏数据
      async getFavoriteData() {
        this.value = this.value.replace(/\s+/g,"")
        let info = {
          authorOrTitle: this.value,
          currentPage: this.currentPage,
          perPageNumber: this.perPageNumber
        }
        const {data} = await getFavoriteList(info)
        let listMore = data.list.map(item => {
          return {
            tag: item.tbTagCS.map(item => {
              return item.tagName
            }),
            img: item.tbVideoManagementCDTOS.videoS,
            title: item.tbVideoManagementCDTOS.videoTitle,
            userImg: item.tbVideoManagementCDTOS.zImages,
            userName: item.tbVideoManagementCDTOS.zAuthorName,
            fromNum: 1,
            from: item.tbVideoManagementCDTOS.pImages,
            id: item.tbVideoManagementCDTOS.vId,
            videoImg: item.tbVideoManagementCDTOS.cover
          }
        })
        this.list = this.list.concat(listMore)
        this.items = this.list
        console.log(listMore.length)
        if(listMore.length === 20) {
          this.currentPage = data.currentPage
        } else {
          this.more = false
        }
      },
      //判断是足迹还是收藏
      getVideoData() {
        let status = parseInt(this.$route.query.status)
        if(status === 0) {
          this.getFootData()
          // console.log('状态为0')
        } else if (status === 1) {
          this.getFavoriteData()
        }
      },
      async test() {
        // 添加收藏
        // 1b324b924d90281c516777e389ee6189
        // 25c392c8561bc5e8fb4aff4886dae52d
        // 821b745f70933b1b2a8554b806b01751
        // const data = await getLike('af497bc0f94abd8aa46a09826738130a')
        // console.log(data)
        // 添加足迹
        // const data = await getFoot({vId: '1b324b924d90281c516777e389ee6189'})
      },
      // 获取路由链接上拼接的token值
      getTokenInUrl() {
        var url = window.location.href;
        if (url.indexOf("token") > 0) {
          let getTokenParams = window.location.href.split("token=")[1];
          getTokenParams=getTokenParams.split("&")[0];
          if (getTokenParams.length >= 32) {
            getTokenParams = getTokenParams.substr(0, 32);
            console.log('%c [ getTokenParams ]', 'font-size:13px; background:pink; color:#bf2c9f;', getTokenParams)
            sessionStorage.setItem("token", getTokenParams);
          }
        }
      }
    },
    mounted() {
      document.querySelector('body').setAttribute('style', 'background-color:#F8F8F8')
    },
    created() {
      // 获取屏幕状态栏高度
      this.phoneStatusBarHeight = window.phoneStatusBarHeight
      let status = parseInt(this.$route.query.status)
      // 修改页面标题
      this.title = status == 0 ? "我的足迹" : "我的收藏";
      document.title = status == 0 ? "我的足迹" : "我的收藏";
      // 获取路由链接上拼接的token值
      this.getTokenInUrl()
      this.getVideoData()
      this.test()
    }
}
</script>

<style scoped lang='less'>
  .favorite-cilck-more{
    text-align: center;
    color: #999999;
    margin-top: 10px;
    font-size: 12px;
    letter-spacing: 1px;
  }
  .img-box{
    margin: 16px;
  }
</style>
<style lang='less'>
.van-nav-bar .van-icon {
  color: #000000 !important;
}
.van-nav-bar__title {
  font-size: 17px !important;
  font-family: PingFangSC-Semibold, PingFang SC !important;
  font-weight: 600 !important;
  color: #000000 !important;
}
</style>
